<template>
    <div>
                <!-- 头部区域 -->
        <div class="header">
            <div class="logo-box">
                <img src="../assets/logo-king.png" alt="">
            </div>
        </div>

        <!-- 内容显示区域 -->
        <!-- 整个页面最核心的  类名应取为container -->
        <div  class="container">
            <div class="login-box">
                <div class="login-box-header">
                    <h4>扫码登录</h4>
                    <span class="line">|</span>
                    <h4>账户登录</h4>
                </div>
                <div class="login-box-form">
                    <div class="login-form-center">
                        <div class="login-form-inline">
                            <label><i class="fa fa-user fa-2x"></i></label><span><input type="text" v-model="loginForm.username" placeholder="邮箱/用户名/登录手机" onfocus="this.placeholder=''" /></span> 
                        </div>     
                        <div class="login-form-inline">
                            <label><i class="fa fa-lock fa-2x"></i></label><span><input type="password" v-model="loginForm.password" placeholder="密码" onfocus="this.placeholder=''" /></span> 
                        </div> 
                        <!-- 登录按钮 -->
                        <div class="login-form-inline">
                            <button type="button" @click="login" class="btn">登&nbsp;&nbsp;&nbsp;录</button>
                        </div>
                    </div>
                </div>

                <div class="login-box-footer">
                    <div class="footer-content">
                        <ul>
                            <li>
                                <i class="fa fa-qq"></i>
                                <a href="#">QQ</a>
                                <span class="line">|</span>
                            </li>
                            <li>
                                <i class="fa fa-wechat"></i>
                                <a href="#">微信</a>
                            </li>
                            <li class="register-link">
                                <i class="fa fa-chevron-circle-right"></i>
                                <a href="#">立即注册</a>
                            </li>
                        </ul>
                    </div>
                </div>              
            </div>      
        </div> 

        <!-- 底部区域 -->
        <!-- <div class="footer">
                <div>
                    <a href="#">关于我们</a>
                    <span>|</span>
                    <a href="#">联系我们</a>
                    <span>|</span>
                    <a href="#">人才招聘</a>
                    <span>|</span>
                    <a href="#">商家入驻</a>
                    <span>|</span>
                    <a href="#">广告服务</a>
                    <span>|</span>
                    <a href="#">手机京东</a>
                    <span>|</span>
                    <a href="#">友情链接</a>
                    <span>|</span>
                    <a href="#">销售联盟</a>
                    <span>|</span>
                    <a href="#">京东社区</a>
                    <span>|</span>
                    <a href="#">京东公益</a>
                    <span>|</span>
                    <a href="#">English Site</a>
                </div>
                <div class="brand">
                    <span>Copyright © 2004-2022  京东JD.com 版权所有</span>
                </div>
        </div> -->
    </div>
</template>

<script>
    export default {
        data() {
            return {
                loginForm:{
                    username:"Bret",
                    password:"Sincere@april.biz"
                }
            }
        },
        methods:{
            //axios 的post方式 就是application/json
            // login() {
            //     this.axios.post('http://47.241.102.141:3000/login',{
            //         username:this.loginForm.username,
            //         password:this.loginForm.password
            //     })
            //     .then(response => {
            //         alert(response.data.message);
            //     })
            //     .then(function (error) {
            //         console.log(error);
            //     });
            // }

            //fetch方式  post请求
            login() {
                fetch('http://47.241.102.141:3000/login',{
                    method:'post',
                    headers:{
                        'Content-Type':'application/json'
                    },
                    body:JSON.stringify({username:this.loginForm.username,password:this.loginForm.password})

                }) 
                .then(response => response.json())
                .then(data => {
                    alert(data.message);
                    console.log(data);
                    //以前存在 cookies中  但是由于是明文 容易被盗取
                    //放在本地存储中  window.localStorage  永久存储
                    // window.sessionStorage  会话结束，即浏览器关闭则会清空 
                    
                    if(data.success) {
                        //1.登录成功后，拿到一个凭证并存起来
                        // 取的时候 用  JSON.parse(data.data);解析
                        // window.localStorage.setItem("token_key",JSON.stringify(data.data));
                        //整个对象序列化
                        // window.sessionStorage.setItem("token_key",JSON.stringify(data.data));

                        //vuex  全局状态管理
                        this.$store.dispatch("asclogin",{data:JSON.stringify(data.data)});

                        //sessionStorage  会话存储，关闭页面后即清除 
                        //2.存储完token之后，才跳转页面
                        this.$router.replace({
                            path:'/userLogin'
                        });
                    } 
                })
                .catch(error => {
                    alert("出现异常");
                    console.log(error);
                });
            }
         }
    }
</script>


<style>
    @import url(../assets/css/style.css);
</style>